<template>
    <div class="loginPage">
        <div>账号登录</div>
        <div>
            <div>
                <input type="text" placeholder="用户（直接登录即可）">
            </div>
            <div>
                <input type="text" placeholder="密码">
            </div>
        </div>
        <div>
            <button @click="doLogin()">登录</button>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        doLogin(){
            // 把用户输入的用户名和密码发送到后台，后台进行登录判断
            // 1、登录成功 单点登录 会返回 token(令牌) 关键字
            //      token 经过加密的 用户登录权限和信息状态
            //      -> 前端可以将该加密token存放于浏览器的存储区
            //      -> 前端后续的所有权限判断，都可以在本地先判断是否存在token
            // 2、登录失败 返回失败信息
            

            //因为蘑菇街没有提供登录接口，所以用localstorage模拟
            localStorage.setItem("token","kfg1999");
            let path = this.$route.params.url;
            //有可能从其他非强制登录页面来到登录页面，登录后跳到首页
            if(!path){
                path = "/";
            }
            this.$router.push(path);
            // console.log()
        }
    },
    // beforeRouteEnter (to, from, next) {
    //     console.log("login",to,from);
    //     console.log("login",to.name,to.fullPath);
    //     next();
    // }
}
</script>

<style lang="less" scoped>
.loginPage{
    width: 100vw;
    position: absolute;
    top: 0;
    bottom: 0;
    >div:first-child{
        height: @h;
        font-size:36px;
        font-weight: bold;
        text-align: center;
        line-height: @h;
        border-bottom: 1px solid @de;
    }
    >div:nth-child(2){
        padding:0 100px;
        margin-top: 150px;
        margin-bottom: 100px;
        >div{
            input{
                outline: 0;
                width: 100%;
                height: 60px;
                border: none;
                border-bottom: 1px solid @de;
                color: @99;
                font-size: 35px;
                font-weight: bold;
                padding-left: 20px;
                margin-top: 40px;
            }
        }
    }
    >div:last-child{
        padding:0 100px;
        button{
            width: 100%;
            height: 80px;
            border: none;
            border-radius: 40px;
            background-color: @pink;
            color: @white;
            font-size: 34px;
            font-weight: bold;
        }
    }
}
</style>